API CSS Custom Highlight : Maîtriser la sélection de texte multi-plages pour des interfaces utilisateur dynamiques

L'API CSS Custom Highlight est un nouvel outil puissant pour les développeurs web qui permet un contrôle sans précédent sur la sélection et le surlignage du texte dans les applications web. Contrairement aux capacités de sélection de base des navigateurs, cette API permet aux développeurs de définir des styles de surlignage personnalisés et de gérer plusieurs plages de sélection par programmation. Cela ouvre un monde de possibilités pour créer des interfaces utilisateur riches, interactives et accessibles. Ce guide offre un aperçu complet de l'API, explorant ses capacités, ses cas d'utilisation et ses détails d'implémentation, le tout dans une perspective globale.

Comprendre les bases de l'API CSS Custom Highlight

Avant de plonger dans des scénarios complexes, il est essentiel de saisir les concepts fondamentaux de l'API. À la base, l'API CSS Custom Highlight introduit plusieurs nouveaux pseudo-éléments CSS, notamment :

• ::selection: Représente la partie d'un document qui a été sélectionnée par l'utilisateur. Cet élément est disponible depuis longtemps, permettant une stylisation de base des sélections de texte.
• ::highlight: Un pseudo-élément plus général pour appliquer des styles aux plages surlignées. C'est la clé de la puissance de la nouvelle API. Vous pouvez maintenant créer des surlignages nommés et leur appliquer un style personnalisé.
• ::target-text: Représente la partie d'un document ciblée par un fragment d'URI (par exemple, #titre-section). Il vous permet de styliser la section de la page vers laquelle l'utilisateur a défilé via un lien.
• ::spelling-error: Représente le texte identifié par l'agent utilisateur comme contenant des fautes d'orthographe. Offre un contrôle sur le style des indicateurs de fautes d'orthographe.
• ::grammar-error: Représente le texte identifié par l'agent utilisateur comme contenant des erreurs grammaticales. Offre un contrôle sur le style des indicateurs d'erreurs grammaticales.

Le pseudo-élément ::highlight est le cheval de bataille de l'API. Il vous permet de définir des surlignages nommés en CSS, puis d'appliquer ces surlignages à des plages de texte spécifiques en utilisant JavaScript.

Concepts clés : Plages et Surlignages

L'API s'articule autour des concepts de plages (ranges) et de surlignages (highlights) :

• Plage (Range) : Une section contiguë de texte dans le document. Représentée par l'objet Range en JavaScript.
• Surlignage (Highlight) : Un style nommé appliqué à une ou plusieurs plages. Défini en CSS à l'aide du pseudo-élément ::highlight(nom-du-surlignage) et manipulé via les API Highlight et HighlightRegistry en JavaScript.

Voyez-le de cette façon : une plage est le 'quoi' (le texte que vous voulez surligner), et le surlignage est le 'comment' (le style que vous voulez appliquer).

Configurer des surlignages personnalisés avec CSS

La première étape consiste à définir vos styles de surlignage personnalisés en CSS. Vous le faites en utilisant le pseudo-élément ::highlight().

            
::highlight(search-result) {
  background-color: yellow;
  color: black;
}

::highlight(important-term) {
  background-color: lightblue;
  font-weight: bold;
}

            

              
                Copy
              
            
          

Dans cet exemple, nous avons défini deux styles de surlignage personnalisés : search-result et important-term. Le surlignage search-result appliquera un fond jaune avec du texte noir, tandis que le surlignage important-term utilisera un fond bleu clair et mettra le texte en gras. Vous pouvez définir toutes les propriétés CSS que vous souhaitez dans ces styles de surlignage.

Gérer les surlignages avec JavaScript

Une fois que vous avez défini vos styles de surlignage en CSS, vous pouvez utiliser JavaScript pour les appliquer à des plages de texte spécifiques. Les API Highlight et HighlightRegistry fournissent les outils pour cela.

Le HighlightRegistry

Le HighlightRegistry est un objet global qui gère tous les surlignages dans le document. Vous pouvez y accéder via l'interface CSS :

            
const highlightRegistry = CSS.highlights;

            

              
                Copy
              
            
          

Créer des surlignages

Pour créer un surlignage, vous utilisez le constructeur Highlight :

            
const highlight = new Highlight();

            

              
                Copy
              
            
          

Initialement, un surlignage n'a aucune plage associée. Vous devez ajouter des plages au surlignage en utilisant la méthode addRange().

Ajouter des plages à un surlignage

Pour ajouter une plage à un surlignage, vous devez d'abord créer un objet Range. Vous pouvez le faire en utilisant la méthode document.createRange() :

            
const range = document.createRange();
range.setStart(startNode, startOffset);
range.setEnd(endNode, endOffset);

highlight.addRange(range);

            

              
                Copy
              
            
          

Où :

• startNode: Le nœud DOM où la plage commence.
• startOffset: Le décalage de caractère dans le startNode où la plage commence.
• endNode: Le nœud DOM où la plage se termine.
• endOffset: Le décalage de caractère dans le endNode où la plage se termine.

Exemple : Surligner des résultats de recherche

Supposons que vous ayez un bloc de texte et que vous souhaitiez surligner toutes les occurrences d'un terme de recherche. Voici comment vous pourriez le faire :

            
function highlightSearchResults(searchTerm, element) {
  const text = element.textContent;
  let index = text.indexOf(searchTerm);

  if (index === -1) {
    return; // Terme de recherche non trouvé
  }

  const highlight = new Highlight();

  while (index !== -1) {
    const range = document.createRange();
    range.setStart(element.firstChild, index);
    range.setEnd(element.firstChild, index + searchTerm.length);
    highlight.addRange(range);
    index = text.indexOf(searchTerm, index + 1);
  }

  // Appliquer le style de surlignage 'search-result'
  highlightRegistry.set('search-result', highlight);
}

const contentElement = document.getElementById('content');
highlightSearchResults('example', contentElement);

            

              
                Copy
              
            
          

Cet extrait de code trouve toutes les occurrences du mot « example » dans l'élément avec l'ID « content » et leur applique le style de surlignage search-result.

Supprimer des plages et des surlignages

Vous pouvez supprimer des plages d'un surlignage en utilisant la méthode deleteRange() :

            
highlight.deleteRange(range);

            

              
                Copy
              
            
          

Vous pouvez également supprimer toutes les plages d'un surlignage en utilisant la méthode clear() :

            
highlight.clear();

            

              
                Copy
              
            
          

Pour supprimer complètement un surlignage, vous pouvez utiliser la méthode delete() du HighlightRegistry :

            
highlightRegistry.delete('search-result');

            

              
                Copy
              
            
          

Cas d'utilisation avancés et considérations

L'API CSS Custom Highlight est un outil puissant qui peut être utilisé dans une variété de scénarios avancés.

Édition collaborative

Dans les applications d'édition collaborative, vous pouvez utiliser l'API pour surligner les modifications apportées par différents utilisateurs. Chaque utilisateur pourrait avoir son propre style de surlignage personnalisé, vous permettant de voir facilement qui a fait quelles modifications. Par exemple, un éditeur de documents collaboratif utilisé par des équipes dans plusieurs pays pourrait utiliser différentes couleurs de surlignage pour représenter les modifications des membres de l'équipe au Japon, en Allemagne et au Brésil.

Éditeurs de code

Les éditeurs de code peuvent tirer parti de l'API pour la coloration syntaxique. Différents éléments de syntaxe (par exemple, mots-clés, opérateurs, commentaires) peuvent se voir attribuer différents styles de surlignage. Les éditeurs de code modernes ont souvent des règles de coloration syntaxique complexes, et cette API permet un contrôle plus précis et personnalisable que les méthodes traditionnelles.

Accessibilité

L'API peut être utilisée pour améliorer l'accessibilité. Par exemple, vous pourriez surligner l'élément actuellement focalisé ou le texte en cours de lecture par un lecteur d'écran. N'oubliez pas d'assurer un contraste de couleur suffisant entre l'arrière-plan du surlignage et la couleur du texte pour les utilisateurs ayant une déficience visuelle. Les WCAG (Web Content Accessibility Guidelines) fournissent des directives spécifiques sur les ratios de contraste des couleurs.

Considérations sur l'internationalisation (i18n)

Lorsque vous utilisez l'API dans des applications multilingues, soyez attentif aux points suivants :

• Direction du texte : Assurez-vous que vos styles de surlignage fonctionnent correctement avec les langues s'écrivant de gauche à droite (LTR) et de droite à gauche (RTL).
• Limites des mots : Différentes langues ont des règles différentes pour les limites des mots. Assurez-vous d'utiliser des algorithmes de détection des limites de mots appropriés lors du surlignage de mots ou de phrases.
• Jeux de caractères : L'API prend en charge l'Unicode, vous pouvez donc surligner du texte dans n'importe quelle langue.

Par exemple, lors du surlignage de termes de recherche en arabe (une langue RTL), assurez-vous que le surlignage reflète visuellement la bonne direction du texte. De même, lors du surlignage de mots-clés en japonais, qui n'utilise pas d'espaces entre les mots, vous devrez utiliser une analyse morphologique appropriée pour identifier les limites des mots.

Considérations sur la performance

Bien que l'API soit puissante, il est important d'être attentif à la performance. La création et la gestion d'un grand nombre de surlignages peuvent avoir un impact sur la performance, en particulier dans les grands documents. Considérez ces conseils :

• Optimiser la création de plages : La création d'objets Range peut être coûteuse. Réutilisez les plages existantes chaque fois que possible.
• Mises à jour par lots : Lorsque vous effectuez plusieurs modifications sur les surlignages, regroupez-les en une seule mise à jour pour minimiser les recaluls de mise en page (reflows).
• Chargement paresseux (Lazy Loading) : Ne surlignez que le texte actuellement visible par l'utilisateur. Chargez les surlignages supplémentaires au fur et à mesure que l'utilisateur fait défiler la page.
• Virtualisation : Pour les documents très volumineux, envisagez d'utiliser des techniques de virtualisation pour ne rendre que la partie visible du document.

Exemples pratiques et extraits de code

Exemple 1 : Surlignage dynamique de mots-clés

Cet exemple montre comment surligner dynamiquement des mots-clés dans un texte en fonction de la saisie de l'utilisateur. Imaginez un utilisateur tapant une requête dans un champ de recherche ; les mots-clés surlignés se mettent à jour en temps réel.

            


  Ceci est un texte d'exemple. Il contient des mots-clés que nous voulons surligner. Nous surlignerons les mots-clés en fonction de la saisie de l'utilisateur.


            

              
                Copy
              
            
          

            
const keywordInput = document.getElementById('keyword-input');
const textContainer = document.getElementById('text-container');

keywordInput.addEventListener('input', () => {
  const keyword = keywordInput.value.trim();
  if (keyword) {
    highlightKeyword(keyword, textContainer);
  } else {
    clearHighlights(textContainer);
  }
});

function highlightKeyword(keyword, element) {
  clearHighlights(element);
  const text = element.textContent;
  let index = text.indexOf(keyword);

  if (index === -1) {
    return;
  }

  const highlight = new Highlight();

  while (index !== -1) {
    const range = document.createRange();
    range.setStart(element.firstChild, index);
    range.setEnd(element.firstChild, index + keyword.length);
    highlight.addRange(range);
    index = text.indexOf(keyword, index + 1);
  }

  CSS.highlights.set('dynamic-keyword', highlight);
}

function clearHighlights(element) {
  CSS.highlights.delete('dynamic-keyword');
}

            

              
                Copy
              
            
          

            
::highlight(dynamic-keyword) {
  background-color: rgba(255, 165, 0, 0.5); /* Orange semi-transparent */
  color: black;
}

            

              
                Copy
              
            
          

Exemple 2 : Implémenter une fonctionnalité « Tout rechercher »

Cet exemple simule une fonctionnalité « Tout rechercher », similaire à celles que l'on trouve dans les éditeurs de texte et les IDE. Toutes les occurrences d'un terme de recherche sont surlignées simultanément.

            


  Ce document contient plusieurs instances du terme de recherche. Le terme de recherche sera surligné dans tout le document.
  Ceci est une deuxième instance du terme de recherche. Voici un autre terme de recherche.


            

              
                Copy
              
            
          

            
const searchTermInput = document.getElementById('search-term');
const documentContent = document.getElementById('document-content');

searchTermInput.addEventListener('input', () => {
  const searchTerm = searchTermInput.value.trim();
  if (searchTerm) {
    findAll(searchTerm, documentContent);
  } else {
    clearFindAllHighlights(documentContent);
  }
});

function findAll(searchTerm, element) {
  clearFindAllHighlights(element);
  const text = element.textContent;
  let index = text.indexOf(searchTerm);
  const highlight = new Highlight();

  while (index !== -1) {
    const range = document.createRange();
    range.setStart(element.firstChild, index);
    range.setEnd(element.firstChild, index + searchTerm.length);
    highlight.addRange(range);
    index = text.indexOf(searchTerm, index + 1);
  }

  CSS.highlights.set('find-all', highlight);
}

function clearFindAllHighlights(element) {
  CSS.highlights.delete('find-all');
}

            

              
                Copy
              
            
          

            
::highlight(find-all) {
  background-color: #90EE90; /* Vert clair */
  color: black;
}

            

              
                Copy
              
            
          

Compatibilité des navigateurs et Polyfills

L'API CSS Custom Highlight est une fonctionnalité relativement nouvelle, la compatibilité des navigateurs peut donc varier. Fin 2024, elle bénéficie d'un bon support dans les navigateurs modernes comme Chrome, Firefox, Safari et Edge. Cependant, il est essentiel de vérifier les dernières données de compatibilité des navigateurs sur des sites comme « Can I use... » pour vous assurer que votre public cible peut utiliser vos fonctionnalités. Si vous devez prendre en charge des navigateurs plus anciens, vous pourriez explorer des polyfills ou des approches alternatives qui imitent la fonctionnalité de l'API, bien qu'ils puissent ne pas offrir le même niveau de performance ou de fidélité.

L'avenir de la sélection et du surlignage de texte

L'API CSS Custom Highlight représente une avancée significative dans le développement web, offrant aux développeurs un contrôle granulaire sur la sélection et le surlignage du texte. À mesure que l'API mûrit et que le support des navigateurs s'améliore, nous pouvons nous attendre à voir des utilisations encore plus innovantes de cette technologie. Des éditeurs de texte avancés aux plateformes de documents collaboratifs, les possibilités sont infinies. Cette API permet une expérience utilisateur plus riche, plus interactive et plus accessible. Pensez à comment cela peut être utilisé pour améliorer l'expérience utilisateur dans tous les domaines, des sites d'actualités internationaux aux plateformes d'apprentissage des langues en ligne.

Conclusion

L'API CSS Custom Highlight est un outil puissant pour créer des interfaces utilisateur dynamiques et interactives. En comprenant les concepts de base des plages, des surlignages et du HighlightRegistry, vous pouvez exploiter cette API pour créer des expériences utilisateur captivantes qui étaient auparavant difficiles ou impossibles à réaliser. En explorant cette API, n'oubliez pas de prendre en compte l'accessibilité, l'internationalisation et la performance pour garantir que vos applications sont utilisables et performantes pour un public mondial. Avec sa flexibilité et son contrôle, l'API CSS Custom Highlight est en passe de devenir un élément essentiel de la boîte à outils du développeur web moderne.